<script setup lang="ts">
import { useAppStore } from '@/store'
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import Icon from '@/components/Icon/index.vue'
import type { RouteRecordRaw } from 'vue-router'

const appStore = useAppStore()
const router = useRouter()
const menu = computed(() => appStore.routes)

const onCollapse = () => {
  console.log(1)
}
const onMenuItem = (item: RouteRecordRaw) => {
  router.push({ name: item.name })
}
</script>
<template>
  <a-layout-sider class="app-sider" :style="{ width: !appStore.collapsed ? '200px' : '' }">
    <a-menu :style="{ height: '100%' }" :collapsed="appStore.collapsed" :default-open-keys="['0']" :default-selected-keys="['0_2']" breakpoint="xl" @collapse="onCollapse">
      <a-menu-item v-for="route in menu.children" :key="route.path" @click="onMenuItem(route)">
        <Icon :type="route.meta.icon" />
        <span class="name">{{ route.meta.title }} </span>
      </a-menu-item>
      <a-sub-menu key="0">
        <template #icon><icon-apps /></template>
        <template #title>Navigation 1</template>
        <a-menu-item key="0_0">Menu 1</a-menu-item>
        <a-menu-item key="0_1">Menu 2</a-menu-item>
        <a-menu-item key="0_2">Menu 3</a-menu-item>
        <a-menu-item key="0_3">Menu 4</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="1">
        <template #icon><icon-bug /></template>
        <template #title>Navigation 2</template>
        <a-menu-item key="1_0">Menu 1</a-menu-item>
        <a-menu-item key="1_1">Menu 2</a-menu-item>
        <a-menu-item key="1_2">Menu 3</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="2">
        <template #icon><icon-bulb /></template>
        <template #title>Navigation 3</template>
        <a-menu-item key="2_0">Menu 1</a-menu-item>
        <a-menu-item key="2_1">Menu 2</a-menu-item>
        <a-sub-menu key="2_2" title="Navigation 4">
          <a-menu-item key="2_2_0">Menu 1</a-menu-item>
          <a-menu-item key="2_2_1">Menu 2</a-menu-item>
        </a-sub-menu>
      </a-sub-menu>
    </a-menu>
  </a-layout-sider>
</template>
